<template>
	<view>
		<view class="goods-content goods">
			<view class="flex goods">
				<image :src="info.goodsImage" mode='widthFix' style="width: 2rem;"></image>
				<view style="width: 200px; margin: 0 10px;">
					<view class="goods-info">{{info.goodsName}}</view>
					<view class="goods-tag">
						<text>{{info.specName}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="peisong">
			<view class="justify-between">
				<text>设备序列号</text>
				<view>{{info.serialNumber}}</view>
			</view>
			<view class="justify-between" style="margin: 20px 0;">
				<text>物流单号</text>
				<view>{{info.trackingNumber}}</view>
			</view>
		</view>

		<view style="padding:0 10px;">
			<view style="background-color: #FFF;">
				<view class="flex person">
					<view class="person-icon">
						<image
							src='https://img.youxuanan.com/crmebimage/public/product/2024/10/11/4721de23d1b4431592bc1ad4e69882fc5oqx3ouz8v.png'
							mode='widthFix' style="width: 100%;"></image>
					</view>
					<view style="margin: 0 20px;">
						<view class="person-info">
							<text>{{merInfo.name || '-'}}</text><text
								style="padding-left: 10px;">{{merInfo.phone || '-'}}</text>
						</view>
						<view class="person-address">
							<text>{{merInfo.addressDetail || '-'}}</text>
						</view>
					</view>
					<view><i class="iconfont icon-fanhui2"></i></view>
				</view>
				<view class="peisong">
					<view class="justify-between">
						<text>快递公司</text>
						<view>
							<picker @change="bindPickerChange" :value="index" :range="fastCompany">
								<view class="uni-input">{{fastCompany[index]}}</view>
							</picker>
						</view>
					</view>
					<view class="justify-between" style="margin: 20px 0;">
						<text>快递单号</text>
						<view>
							<input class="uni-input" @input="onKeyInput" focus placeholder="请输入快递单号" />
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view style="color: #909399;padding: 10px;font-size: 1em;">
			<view>归还说明：</view>
			
			<view style="margin: 15px 0;">
				1.归还设备时，请选择顺丰物流保价，不支持到付；未保价商品造成的损坏、丢失，由寄件方承担（商家免责）。
			</view>
			
			<view>
				2.租期结束（包含延期3日）当天寄出即截止计算租期，若延期寄出，商家有权收取延期费用；若提前归还设备，商家有权按原定租期收取全额租金，特殊情况可与归还地址处商家电话协商。
			</view>
			
			<view style='margin-top: 15px;'>3.请以原包装归还设备，未按原包装归还的，商家有权扣取相应包装费用。</view>
		</view>
		
		<view class="backMyProduct" @click="tapBack">提交归还</view>


	</view>
</template>

<script>
	import {
		ReturnBackProductInfo,
		getMerchantInfo,
		giveBackMyPhone
	} from '@/api/order.js';

	import {
		getFastMailConpany
	} from '@/api/api.js';

	export default {
		data() {
			return {
				orderNo: '',
				info: '',
				merInfo: '',
				fastCompany: [],
				index: 0, //快递下标
				inputValue: '', //快递单号
				company:[]
			}
		},
		onLoad(options) {
			this.info = JSON.parse(options.detail);
			this.orderNo = options.orderNo;
			console.log(this.info,'详情')
			this.getMerInfo();
			getFastMailConpany()
				.then(res => {
					for (let i = 0; i < res.data.length; i++) {
						this.fastCompany.push(res.data[i].deliveryName)
					}
					this.company = res.data;
					console.log(this.fastCompany, '跨度')
				})
			// this.getProductInfo();
		},
		methods: {
			onKeyInput: function(event) {
				this.inputValue = event.target.value
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value;
			},
			//商户详情
			getMerInfo() {
				console.log(this.info,'商户详情')
				getMerchantInfo({
						merId: this.info.merId
					})
					.then(res => {

						this.merInfo = res.data;
						console.log(this.merInfo, '商户详情')
					})
			},
			//商品详情
			// getProductInfo(){
			// 	ReturnBackProductInfo(
			// 	{
			// 		orderNo:this.orderNo
			// 	})
			// 	.then(res=>{
			// 		this.info = res;
			// 	})
			// }
			//提交归还
			tapBack(){
				const items = this.company.filter(item=>this.fastCompany[this.index] == item.deliveryName);
				console.log(items,'快递公司')
				let submit = {
					orderNo: this.orderNo, // 订单号
					addressId: this.merInfo.id, // 商户收件地址ID
				    expressCode: items[0].deliveryCode, // 快递公司编码
					expressName: items[0].deliveryName, // 快递公司名称
					expressNumber: this.inputValue, // 快递单号
					serialNumber: this.info.serialNumber // 设备序列号
				}
				giveBackMyPhone(submit)
				.then(res=>{
					uni.redirectTo({
						url: '/pages/other/giveBackSuccess'
					})
				})
				.catch((err) => {
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					});
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 商品信息 */
	.goods {
		margin: 10px;
		padding: 10px;
		background-color: #fff;
	}

	.goods img:first-child {
		width: 85px;
		height: 85px;
	}

	.goods-info {
		font-size: 1.2em;
		line-height: 19px;
		color: #262626;
		/* 溢出隐藏，省略号 */
		overflow: hidden;
		/* 文本超出给予省略号 */
		text-overflow: ellipsis;
		/* 溢出不换行 */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		line-clamp: 2;
		-webkit-line-clamp: 2;
	}

	.goods-tag {
		margin: 10px 0;
	}

	.goods-tag span {
		font-size: 11px;
		color: #888;
		background-color: rgb(246, 247, 247);
	}

	.goods-price-icon {
		font-size: 9px;
		color: red;
	}

	.goods-price-num {
		font-size: 16px;
		color: red;
	}

	.goods-price p:last-child {
		margin-left: 10px;
	}

	.flex1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/* 配送 */
	.peisong {
		margin: 10px;
		padding: 10px;
		background-color: #fff;
		font-size: 13px;
		color: #262626;
		letter-spacing: 1px;
	}

	.peisong-item {
		margin: 20px 0;
	}

	.peisong-tips {
		font-size: 12px;
		color: #989898;
		margin-left: 20px;
		/* 溢出省略显示省略号一行显示 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height: 20px;
	}

	.justify-between {
		display: flex;
		justify-content: space-between;
	}

	.person-icon {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		/* 使原图不受挤压 */
		flex-shrink: 0;
	}

	.person-info {
		font-size: 15px;
		color: #262626;
		margin-bottom: 10px;
	}

	.person-info span:last-child {
		margin-left: 20px;
	}

	.person-address {
		font-size: 12px;
		line-height: 18px;
		color: #333;
	}

	.person {
		/* width: 375px; */
		margin: 10px;
		background-color: #fff;
		padding: 10px;
		align-items: center;
	}
	.backMyProduct{
		width: 90%;
		background-color: rgb(255, 110, 19);
		color: white;
		font-size: 1.1em;
		margin: 20px auto;
		text-align: center;
		padding: 15px 0;
		border-radius: 30px;
	}
</style>